<template>
  <Header :scroll-top="scrollTop">
    {{ pageTitle }}
  </Header>
  <view
      class="address-list"
      v-if="list.length>0">
    <UniSwipeAction :autoClose="false">
      <UniSwipeActionItem
          v-for="(item) in list"
          :key="item.id"
          @click="showModal( item)"
      >
        <view class="address-item">
          <AddressItem
              :address-item="item"
              @edit="goEditorAddress"
              @click="handleClick" />
        </view>
        <template #right>
          <view
              class="delete-icon"
              @click="showModal(item)">
            <uv-icon
                name="trash"
                color="#fff" />
          </view>
        </template>
      </UniSwipeActionItem>
    </UniSwipeAction>
  </view>
  <Empty
      :iconSrc="emptyAddressIcon"
      v-else
  >
    您还没有新增地址~
  </Empty>
  <view class="form-buttons">
    <view class="btn-box">
      <!-- #ifdef MP-WEIXIN -->
      <view class="btn" @tap="wxAddFn">
          <image
              :src="iconWechat"
              class="icon"
          /> 微信导入
      </view>
      <!-- #endif -->
        <view class="btn btn-primary" @tap="goCreateAddress">
          <image
              :src="iconAdd"
              class="icon"
          />
          新增地址
        </view>
    </view>
  </view>
  <ReturnTop :scroll-top="scrollTop" />
  <Modal
      ref="delModalRef"
      content="确认要删除地址吗？"
      @confirm="doDeleteRequest" />
</template>

<script setup>
import { ref, unref, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import Empty from '@/components/Empty/index.vue'
import {iconAdd, iconWechat} from "@/utils/images";
import { getAddressDel, getAddressList, } from '@/api/address'
import { useRouter } from "@/hooks/useRouter";
import Header from "@/components/Header/index.vue"
import ReturnTop from "@/components/ReturnTop/index.vue";
import { useScroll } from "@/hooks/useScroll";
import Modal from "@/components/Modal/index.vue";
import AddressItem from "@/pages/address/component/AddressItem.vue";
import UvButton from "@/uni_modules/uv-button/components/uv-button/uv-button.vue";
import { usePaging } from "@/hooks/usePaging";
import { emitter } from "@/utils/emitter";
import UniSwipeAction from "@/components/Uni/uni-swipe-action/uni-swipe-action.vue";
import UniSwipeActionItem from "@/components/Uni/uni-swipe-action-item/uni-swipe-action-item.vue";

// ================================= hooks =============================================
const {push, goBack, getParams} = useRouter()
const {scrollTop} = useScroll()

const actionType = ref(undefined) // 页面状态是选择还是管理 'select' | undefined
const pageTitle = computed(() => actionType.value === 'select' ? '选择地址' : '地址管理') // 页面title

onLoad((option) => {
  const params = getParams?.(option)
  actionType.value = params?.type
})

onShow(() => {
  refreshPage?.()
})
// ============================== 用户地址列表相关 =================================
const {list, refreshPage} = usePaging({
  request: getAddressList,
  // load: true
});


/**
 * 去创建地址
 */
function goCreateAddress() {
  push?.({url: '/pages/createAddress/createAddress'}, {
    data: {
      type: actionType.value
    }
  })
}

/**
 * 去修改地址
 * @param address
 */
function goEditorAddress(address) {
  push?.({url: '/pages/createAddress/createAddress'}, {
    data: {
      type: actionType.value,
      address
    }
  })
}

/**
 * 处理选择状态下返回
 * @param item
 */
function handleClick(item) {
  if (actionType.value === 'select') {
    emitter.emit('selectAddress', item)
    goBack?.({delta: 1})
  }
}


// ============================ 删除相关 ============================
const delModalRef = ref()
const prepareData = ref(undefined)

/**
 * 打开弹窗
 */
function showModal(data) {
  prepareData.value = data
  unref(delModalRef).show()
}

/**
 * 删除地址
 */
async function doDeleteRequest() {
  await getAddressDel(prepareData.value)
  await refreshPage?.()
}

// 微信导入
const wxAddFn = () => {
  uni.chooseAddress({
    success(res) {
      let addData = {
        realName: res.userName,
        phone: res.telNumber,
        detail: res.detailInfo,
        province: res.provinceName,
        city: res.cityName,
        district: res.countyName
      }
      goEditorAddress(addData)
    },
    fail:(res)=>{
      console.log('err---选择地址',res)
    }
  })
}
</script>

<style lang="scss">
@import "../../style/images";

.address-list {
  padding: 20rpx 20rpx 100rpx 20rpx;
}

.form-buttons {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  left: 0;
  z-index: 999;
  width: 100%;
  padding: 0;
  .btn-box {
    padding: 0 34rpx;
    display: flex;
    .btn{
      flex: 1;
      margin-left: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 90rpx;
      border: 1px solid #333333;
      font-size: 34rpx;
      color: #333333;
      cursor: pointer;
      .icon{
        width: 44rpx;
        height: 44rpx;
        margin-right: 16rpx;
      }
      &:first-child{
        margin-left: 0;
      }
      &.btn-primary{
        background: #EE6D46;
        border-color: #EE6D46;
        color: #fff;
      }
    }
  }
}

.delete-icon {
  margin: 0 0 20rpx 20rpx;
  width: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $primary-color;
  border-radius: 30rpx;
  transition: all .3s;

  &:active {
    scale: .9;
  }
}

.address-item {
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 20rpx;
}
</style>
